<template>
  <div class="geren">
    <el-descriptions title="个人信息" direction="vertical" :column="1" border>
      <template slot="extra">
        <!-- <el-button type="primary" size="small" >修改个人信息</el-button> -->
      </template>
      <el-descriptions-item label="id">{{ this.list.id }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{
        this.list.name
      }}</el-descriptions-item>
      <el-descriptions-item label="部门">{{
        this.list.department
      }}</el-descriptions-item>
      <el-descriptions-item label="权限">
        <el-tag size="small">{{ this.rname }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import server from "../serive/user";
// import { mapActions } from "vuex";

export default {
  name: "user",
  data() {
    return {
      list: [],
      id: "",
    };
  },

  methods: {
    list123() {
      this.id = this.Uid;
      server.getUser(this.id).then((res) => {
        this.list = res.data.data;
        console.log(this.list);
      });
    },
    getRname() {
      const rname = localStorage.getItem("rname");
      this.rname = rname;
    },
  },
  created() {
    this.list123();
    this.getRname();
  },
  computed: {
    Uid() {
      return localStorage.getItem("uid");
    },
  },
};
</script>

<style>
.geren{
  width: 90%;
  padding: 30px;
}
</style>